<template>
	<view v-if="myInfo">
		<view class="nav-back">
			<top-heigth backTitle="个人信息"></top-heigth>
		</view>	
		
		<view class="content-box">

			<view class="mine-font">
				<view class="list">
					<view class="list-l">实名认证</view>
					<view class="list-r">
						<view v-if="myInfo.isAuthentication ==0" @click="goRealName(myInfo.id,myInfo.version)" class="list-but">立即认证</view>
						<view v-if="myInfo.isAuthentication ==1" class="list-but">已认证</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
				</view>
				<view class="list">
					<view class="list-l">姓名</view>
					<view class="list-r">
						<view>
							{{myInfo.staffName ? myInfo.staffName : '未实名认证'}}
						</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
				</view>
				<view class="list" @click="goPhoto()" v-if="!isShenhe">
					<view class="list-l">资质照片</view>
					<view class="list-r">
						<image class="go" src="/static/image/more.png"></image>
					</view>
				</view>
				<view class="list" @click="goPersonal(myInfo.id,myInfo.version)">
					<view class="list-l">个人简介</view>
					<view class="list-r">
						<image class="go" src="/static/image/more.png"></image>
					</view>
				</view>
				<view class="list" @click="zhifubao">
					<view class="list-l">支付宝账户</view>
					<view class="list-r">
						<view>
							{{myInfo.aliCode ? myInfo.aliCode : '未绑定'}}
						</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
				</view>
				<view class="list">
					<view class="list-l">接单手机</view>
					<view class="list-r">
						<view class="list-r-font" style="text-align: right;">{{myInfo.staffMobileEx}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content-box">
			<view class="mine-font">
				<view class="list" @click="goService()">
					<view class="list-l">服务项目</view>
					<view class="list-r">
						<image class="go" src="/static/image/more.png"></image>
					</view>
				</view>
				<view class="list" v-if="myInfo.tAppStaffTimeConfigVo">
					<view class="list-l">接单时段</view>
					<view class="list-r" @click="goTime()">
						<view class="list-r-font">
							<span style="margin-right: 16rpx;">{{myInfo.tAppStaffTimeConfigVo.startTime}}--{{myInfo.tAppStaffTimeConfigVo.endTime}}</span> &nbsp;&nbsp;&nbsp;
							<!-- (7天/周或周一周二） -->
							<span v-if="myInfo.tAppStaffTimeConfigVo.monday == 1">周一</span>
							<span v-if="myInfo.tAppStaffTimeConfigVo.tuesday == 1">周二</span>
							<span v-if="myInfo.tAppStaffTimeConfigVo.wednesday == 1">周三</span>
							<span v-if="myInfo.tAppStaffTimeConfigVo.thursday == 1">周四</span>
							<span v-if="myInfo.tAppStaffTimeConfigVo.friday == 1">周五</span>
							<span v-if="myInfo.tAppStaffTimeConfigVo.staturday == 1">周六</span>
							<span v-if="myInfo.tAppStaffTimeConfigVo.sunday == 1">周日</span>
						</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
				</view>
				<view class="list" @click="toLocation">
					<view class="list-l">接单位置</view>
					<view class="list-r">
						<view class="list-r-font">{{myInfo.staffAddress}}</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
				</view>
				
			</view>
		</view>
		<uv-modal ref="modalAli" title="支付宝账户" @confirm="confirmAli">
			<view class="slot-content">
				<uv-input placeholder="请输入支付宝账户" border="surround" v-model="aliCode"></uv-input>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				location: uni.getStorageSync('location'),
				myInfo: null,
				name:'',
				aliCode: "",
				isShenhe: 1
			}
		},
		components: { TopHeigth },
		onShow() {
			this.getList()// 技师详情
			uni.$u.http.post('/api/shop/v1_0/linyue/version',{}).then((res) => {
				this.isShenhe = !res.data
			})
		},
		methods: {
			zhifubao(){
				this.$refs.modalAli.open();
			},
			confirmAli(){
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/updateTAppStaff',{
					id:this.userInfo.id,
					version: this.myInfo.version,
					aliCode: this.aliCode
				}).then((res) => {
					this.getList()
				})
			},
			toLocation(){
				uni.navigateTo({
					url: "/pages/index/place"
				})
			},
			getList(){// 技师详情
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
					id:this.userInfo.id,
				}).then((res) => {
					this.myInfo = res.data
					this.aliCode = this.myInfo.aliCode
					if(this.myInfo.staffMobile && this.myInfo.staffMobile.length == 11){
						this.myInfo.staffMobileEx = this.myInfo.staffMobile[0] + this.myInfo.staffMobile[1] + this.myInfo.staffMobile[2] + "****" + this.myInfo.staffMobile[7] + this.myInfo.staffMobile[8] + this.myInfo.staffMobile[9] + this.myInfo.staffMobile[10]
					}
					// 判断是否默认定位
					if(this.location && this.location.latitude && this.location.formattedAddress && !this.myInfo.staffAddress){
						// 有定位信息但是用户没有设置接单定位
						uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/updateTAppStaff',{
							id:this.userInfo.id,
							version: this.myInfo.version,
							staffAddress: this.location.formattedAddress,
							staffLat: this.location.latitude,
							staffLng: this.location.longitude,
						}).then((res) => {
							this.myInfo.staffAddress = this.location.formattedAddress
						})
					}
				})
			},
			 confirm() {
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{//tAppUserRCA/updateTAppUser
						id:this.userInfo.id,
						version:this.userInfo.version,
						userName:this.name,
				}).then((res) => {
					uni.showToast({
						icon: "none",
						title: res.message
					})
					
				})
				
			}, /**/
			goRealName(id,version){
				uni.navigateTo({
					url: "/pages/index/realName?id="+ id +'&version='+ version
				})
			},
			
			goPhoto(id,version){
				uni.navigateTo({
					url: "/pages/index/photo"
				})
			},
			goPersonal(id,version){
				uni.navigateTo({
					url: "/pages/mine/personal?id="+ id +'&version='+ version
				})
			},
			goTime(){
				uni.navigateTo({
					url: "/pages/index/time"
				})
			},
			goService(){
				uni.navigateTo({
					url: "/pages/mine/service"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.mine-back{
		background: url("/static/image/back2.png") no-repeat;
		background-size: 100% auto;
		
	}
	
	.mine-font{
		background: #fff;
		border-radius: 16rpx;
		//box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.05);
		font-size: 28rpx;
		color: #02091A;
		margin-top: 24rpx;
		padding: 0 24rpx;
		.list{
			@include flex;
			align-items: center;
			justify-content:space-between;
			padding:28rpx 0;
			border-bottom: 2rpx solid #eee;
			.go{
				width: 32rpx;
				height: 32rpx;
			}
			.list-l{
				@include flex;
				align-items: center;
				justify-content:flex-start;
				min-width:130rpx;
			}
			.list-r{
				@include flex;
				align-items: center;
				justify-content:flex-end;
				width: calc(100% - 164rpx);
				.list-r-font{
					width: calc(100% - 32rpx);
					color: #333;
					font-size: 24rpx;
					margin-right: 16rpx;
				}
			}
			.list-but{
				border: 2rpx solid #01B88C;
				background: #fff;
				color: #01B88C;
				text-align: center;
				line-height: 52rpx;
				height: 52rpx;
				width: 162rpx;
				border-radius: 52rpx;
				margin-left: 8rpx;
				font-size: 28rpx;
			}
		}
		.list:last-child{
			border-bottom:none;
		}
	}
	.nc{
		@include flex;
		align-items: center;
		justify-content:flex-start;
	}
</style>
